<script lang="ts" setup>
import { h, ref, onMounted } from "vue";
import { ElNotification } from "element-plus";

defineOptions({
  name: "index",
});
//--================= Data
let routes: string[] = [];
//--================= Methods
const open1 = () => {
  ElNotification({
    title: "Title",
    message: h("i", { style: "color: teal" }, "This is a reminder"),
  });
};

function showItem() {
  routes = JSON.parse(localStorage.getItem("routes"));
  console.log(routes, "routes.....");
}

showItem();

//--================= Other
// onMounted(() => {
//   showItem();
// });
</script>

<template>
  <fieldset class="pretty-fieldset">
    <legend>重点数据</legend>
    <el-button @click="open1" plain>弹出消息</el-button>
    <el-button type="primary" @click="showItem()" plain>Show Item</el-button>
    <el-button type="success" plain>Success</el-button>
    <el-button type="info" plain>Info</el-button>
    <el-button type="warning" plain>Warning</el-button>
    <el-button type="danger" plain>Danger</el-button>
  </fieldset>
  <div style="display: flex">
    <!-- <fieldset class="pretty-fieldset">
      <legend>组件传输</legend>
      <div class="mb-4"> -->
    <ul class="pretty-list">
      <li v-for="(item, index) of routes" :key="index">
        <router-link :to="item.path">{{ item.name }}</router-link>
      </li>
    </ul>
    <!-- </div>
    </fieldset> -->
  </div>
</template>

<style scoped>
.pretty-list {
  list-style: none; /* 移除默认的列表样式 */
  padding: 0; /* 移除默认的填充 */
  margin: 0; /* 移除默认的边距 */
  display: flex;
  flex-direction: row;
  flex-flow: row wrap;
}

.pretty-list li {
  background-color: #f2f2f2; /* 背景色 */
  border-radius: 5px; /* 边框圆角 */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 阴影效果 */
  padding: 10px 20px; /* 内边距 */
  margin: 10px; /* 下外边距，用于分隔列表项 */
  color: #333; /* 文本颜色 */
  font-size: 16px; /* 字体大小 */
  text-align: left; /* 文本左对齐（默认为左对齐，但这里明确指定） */
  transition: all 0.5s ease; /* 过渡效果 */
  width: 350px;
  height: 30px;
  text-align: center;
  font-size: 14px;
  text-shadow: 1px 1px 1px #888;
  /* flex: 1; */
}

.pretty-list li:hover {
  background-color: #ddd; /* 鼠标悬停时的背景色 */
  cursor: pointer;
  font-size: 16px;
  color: blue;
  /* transform: scale(1.05); /* 如果不需要放大效果，可以注释掉这一行 */
}

/* 可选：给列表项添加分隔线 */
.pretty-list li:not(:last-child) {
  border-bottom: 1px solid #ddd; /* 除了最后一个列表项外，其他列表项都有底部边框 */
}
/* --====================== */

.pretty-fieldset {
  border: 2px solid #ccc; /* 边框样式 */
  border-radius: 5px; /* 边框圆角 */
  padding: 20px; /* 内边距 */
  margin: 10px; /* 外边距，上下各10px */
  background-color: #fff; /* 背景色 */
  box-shadow: 2px 2px #eee;
}

.pretty-fieldset legend {
  color: #333; /* 标题颜色 */
  font-weight: bold; /* 标题加粗 */
  padding: 0 10px; /* 标题内边距 */
  /* 可选：给标题添加一些样式，比如背景色、边框等 */
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 5px 5px 0 0; /* 顶部左右圆角，底部圆角与fieldset保持一致 */
}

/* 可选：给表单内的其他元素添加样式 */
.pretty-fieldset label {
  display: block; /* 块级显示 */
  margin-bottom: 5px; /* 底部外边距 */
}

.pretty-fieldset input[type="text"] {
  width: 100%; /* 宽度100% */
  padding: 5px; /* 内边距 */
  box-sizing: border-box; /* 包括内边距和边框在内的宽度 */
}

a {
  text-decoration: none; /* 移除下划线 */
  color: inherit; /* 继承父元素的颜色，或者你可以设置为任何你想要的颜色 */
  /* 你可以添加更多样式重置，如移除边框、背景色等 */
  border: none;
  background-color: transparent;
}
</style>
